<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<link rel="stylesheet" href="element-plus/index.css">
		<script src="element-plus/index.full.js"></script>
	</head>
	<body>
		<div id='app'>
			<el-card style="max-width: 500px;margin: 50px auto;">
				<el-form ref="studentForm" :model="form" :rules="rules" label-width='100'>
					<!-- 姓名不能为空 -->
					<el-form-item label='学生姓名' prop="name">
						<el-input v-model="form.name" placeholder="请输入学生姓名"></el-input>
					</el-form-item>
					<!-- 班级不能为空 -->
					<el-form-item label='班级' prop="class">
						<el-input v-model="form.class" placeholder="请输入班级"></el-input>
					</el-form-item>
					<!-- 11位数字 -->
					<el-form-item label='联系方式' prop="phone">
						<el-input v-model="form.phone" placeholder="请输入联系方式"></el-input>
					</el-form-item>
					<!-- 性别不能为空 -->
					<el-form-item label='性别' prop="gender">
						<el-radio-group v-model="form.gender">
							<el-radio :value='1'>男</el-radio>
							<el-radio :value='2'>女</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item>
						<el-button @click="post" type='primary'>添加学生</el-button>
					</el-form-item>
				</el-form>
			</el-card>
		</div>
		<script>
			const { ElMessage } = ElementPlus;

			Vue.createApp({
				data(){
					return{
						form: {
							name: "", // 学生姓名
							class: "", // 班级
							phone: "", // 联系方式
							gender: "" // 性别
						},
						rules: {
							name: [
								{ required: true, message: "学生姓名不能为空", trigger: "blur" }
							],
							class: [
								{ required: true, message: "班级不能为空", trigger: "blur" }
							],
							phone: [
								{ required: true, message: "联系方式不能为空", trigger: "blur" },
								{ pattern: /^\d{11}$/, message: "请输入11位数字", trigger: "blur" }
							],
							gender: [
								{ required: true, message: "请选择性别", trigger: "change" }
							]
						}
					}
				},
				methods:{
					post(){
						this.$refs["studentForm"].validate(valid => {
							if (valid) {
								ElMessage.success("添加学生成功");
								// 这里可以添加提交表单的逻辑，例如调用 API
							} else {
								ElMessage.error("请检查表单内容");
							}
						});
					}
				}
			}).use(ElementPlus).mount('#app')
		</script>
	</body>
</html>